<template>
  <div>
    <div class="cardSchool">
      <van-nav-bar
        :fixed="true"
        left-arrow
        @click-left="onClickLeft"
        :placeholder="true"
      ></van-nav-bar>
      <div v-for="(item, index) in videoHeader" :key="index">
        <div class="csOne-video">
          <video
            autoplay
            controls
            :src="item.filepath"
            class="cs-video"
          ></video>
        </div>
        <div class="cs-subject">
          <div class="cs-subjectone">
            <div>{{ item.title }}</div>
            <p>{{ item.djl }}人观看</p>
          </div>
          <div>
            <img src="../../assets/images/16.png" alt />
            <p>3.7W</p>
          </div>
        </div>
      </div>
      <!-- 课程目录 -->
      <!-- <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (1).png" alt />
              <p>课程目录</p>
            </div>
            <div>
              <p>更多</p>
              <img src="../../assets/images/05.png" alt />
            </div>
          </div>
          <div class="course-video">
            <div>
              <img src="../../assets/images/08.png" alt />
              <p>科一考试流程</p>
            </div>
            <div>
              <img src="../../assets/images/08.png" alt />
              <p>科一考试流程</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- 驾考秘籍 -->
      <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (2).png" alt />
              <p>驾考秘籍</p>
            </div>
            <div @click="href('/Esoterica')">
              <p>更多</p>
              <img src="../../assets/images/05.png" alt />
            </div>
          </div>
          <div
            v-for="(item, index) in esoterica"
            :key="index"
            class="cs-esoterica"
            @click="href('/SecretDetails', item.id)"
          >
            <p>{{ item.title }}</p>
            <div>
              <p>{{ item.createTime }}</p>
              <div>已有{{ item.djl }}阅读</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 讨论区 -->
      <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (3).png" alt />
              <p>讨论区</p>
            </div>
          </div>
          <div class="cs-forum" v-for="(item, index) in forum" :key="index">
            <img :src="item.userimg" alt />
            <div>
              <p>{{ item.userId }}</p>
              <div>{{ item.remork }}</div>
            </div>
            <!-- <div>
              <img src="../../assets/images/16.png" alt />
              <p>{{ item.dzl }}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="sd-input">
      <input type="text" v-model="value" placeholder="说点什么吧~" />
      <div>
        <div @click="announce" class="sd-announce">发表</div>
      </div>
      <div @click="cancel" class="sd-cancel">取消</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  CardCheats,
  CardDetails,
  CardReview,
  driverComments
} from "../../assets/js/api/exam";
// import { baseURL } from "../../assets/js/config";
// import { baseURL } from "../../assets/js/config";
export default {
  name: "CardSchool",
  data() {
    return {
      // 假数据
      // 标题
      videoHeader: [],
      // 评论
      value: "",
      // 驾考秘籍
      esoterica: [],
      // 讨论区
      forum: []
    };
  },

  mounted() {
    // 详情页
    CardDetails(this.$route.params.lid).then(res => {
      // console.log(res);
      this.videoHeader = res.data;
      // console.log(this.videoHeader);
    });

    // 评论区
    CardReview(this.$route.params.lid).then(res => {
      // console.log(res);
      for (let i = 0; i < 10; i++) {
        this.forum.push = res.data[i];
      }
      this.forum = res.data;
    });

    // 驾考秘籍
    CardCheats(this.$route.params.type).then(res => {
      // console.log(res);
      this.esoterica = res.data;
    });
  },

  methods: {
    cancel() {
      this.value = "";
    },

    announce() {
      // console.log(this.value);
      let obj = {
        pid: this.$route.params.lid,
        remork: this.value
      };
      driverComments(obj).then(res => {
        // console.log("参数" + obj.pid, obj.remork);
        if (res.code == 0) {
          Toast.success("发表成功");
          this.value = "";
          // alert("发表成功");
          CardReview(this.$route.params.lid).then(res => {
            // console.log(res);
            for (let i = 0; i < 10; i++) {
              this.forum.push = res.data[i];
            }
            this.forum = res.data;
          });
        }
      });
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    href(url, lid) {
      if (url == "/Esoterica") {
        this.$router.push({ path: `${url}/${this.$route.params.type}` });
        return;
      }
      if (lid == undefined) {
        this.$router.push({ path: url });
      } else {
        this.$router.push({ path: `${url}/${lid}` });
      }
    }
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
